<template>
  <slot name="header"></slot>
  <form-item title="游戏品牌" :pass="true" value="platform">
    <el-select v-model="data.query.platform" placeholder="请选择" filterable @change="chooseCate">
      <el-option label="全部" :value="-1" />
      <el-option class="marginB5 marginT5" v-for="item in data.platformList" :key="item.value" :label="item.label" :value="item.value" v-show="item.status">
        <el-tag class="width100">{{ item.label }}</el-tag>
      </el-option>
    </el-select>
  </form-item>
  <form-item title="游戏" :pass="true" value="game_ids">
    <el-select class="imWidth100" v-model="data.query.game_ids" placeholder="请选择" filterable multiple @change="chooseGame">
      <el-option label="全部" :value="-1" />
      <el-option v-for="item in data.gameList" :key="item.value" :label="'【' + item.value + '】' + item.label"
        :value="item.value" v-show="item.status"/>
    </el-select>
  </form-item>
  <slot name="footer"></slot>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue'
import { selectToLabel } from '@/utils/index'
import { GameBrandNum } from '@/config/eunm'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useRoute } from 'vue-router'
const route = useRoute()

export interface GameTypes {
  platform: number
  game_ids: any
}
const data = reactive({
  query: {
    platform: -1,
    game_ids: [],
  },
  game_type: -1,
  platformList:indexStore.platformArray,
  gameList:indexStore.gameArray,
  // 默认选中第一个游戏的页面
  gamePathList: [
    { label: '游戏水位', value: 'winLose' },
    { label: 'JILI数值效果', value: 'gameJili' },
  ] 
})

const emit = defineEmits(['query'])
watch(
  () => data.query,
  (to) => {
    emit('query', { ...data.query })
  },
  { deep: true, immediate: true }
)

onMounted(async () => {
  getGameType(-1)
})

const gameShow = () => {
  if(data.query.platform == -1 && data.game_type==-1){ // 品牌为全部 游戏为全部
    data.gameList.forEach((item:any)=>{
      item.status = 1
    })
  }else if(data.query.platform !=-1 && data.game_type==-1){ // 选择品牌 不选择游戏类型
    data.gameList.forEach((item:any)=>{
      if(item.platform_backend_echo == data.query.platform){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }else if(data.query.platform !=-1 && data.game_type!=-1){ // 选择品牌 选择游戏类型
    data.gameList.forEach((item:any)=>{
      if(item.platform_backend_echo == data.query.platform && item.type == data.game_type){
        item.status = 1
      }else{
        item.status = 0
      }
    })
  }else if(data.query.platform ==-1 && data.game_type !=-1){ // 不选择品牌 选择游戏类型(隐藏没有此游戏的品牌)
    let platformData  = [] as number[],newData=[] as any[],dataList = [] as any[];
    data.gameList.forEach((item:any)=>{
      if(item.type == data.game_type){
        item.status = 1
        platformData.push(item.platform_backend_echo)
      }else{
        item.status = 0
      }
    })
    newData = [...new Set(platformData)]
    newData.forEach((item:number)=> {
      // 排除已经合并的品牌
      if(selectToLabel(GameBrandNum,item)){
        dataList.push({label:selectToLabel(GameBrandNum,item),value:item, status: 1})
      }
    })
    data.platformList = dataList
    console.log(data.platformList);
  }
}

// 选择游戏品牌
const chooseCate = (value:number) => {
  data.query.platform = value
  gameShow()
}
// 选择游戏
const chooseGame = async (row: any) => {
  const all = row.find((item: number) => item == -1)
  if (all) {
    data.query.game_ids = [-1] as any
  } else {
    data.query.game_ids = row
  }
}

// 赋值游戏类型
const getGameType = (type:number) => {
  data.game_type = type
  data.platformList = indexStore.platformArray
  data.gameList = indexStore.gameArray
  gameShow()
}

// 赋值游戏类型
const onHideDetails = (type:number) => {
  data.query.platform = -1
  data.query.game_ids = []
  data.game_type = type
  data.platformList = indexStore.platformArray
  data.gameList = indexStore.gameArray
  gameShow()
}

defineExpose({
  getGameType,
  onHideDetails,
})
</script>

<style lang="scss" scoped></style>
